<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/output.css" rel="stylesheet">
</head>

<body class="bg-sky-50">
  <!-- This example requires Tailwind CSS v2.0+ -->
  <div class="relative overflow-hidden ">
    <div class="container px-8 h-screen flex flex-row m-auto max-w-7xl sm:px-6 lg:px-8">
      <div class="basis-full m-auto md:basis-9/12">
        <div class="sm:text-center lg:text-left">
          <h1 class="text-6xl font-extrabold text-gray-900 md:text-7xl">
            <span
              class="before:block before:absolute before:-inset-2 before:-skew-y-3 before:bg-pink-500 relative inline-block">
              <span class="relative italic text-white font-extrabold">Emojilize</span>
            </span>
            <span class="invisible md:visible">😇</span>
            <br class="md:hidden">
            <span class="font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-violet-600 to-pink-600">YOUR
              FACE</span>
          </h1>

          <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
            自动识别图片中的人脸，并识别表情。替换成对应的emoji.
          </p>
          <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
            <div class="rounded-md shadow">
              <a href="https://gitee.com/xzcxzc_yy/emojilizer/attach_files/919805/download/app-release.apk"
                class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10">
                下载安卓应用
              </a>
            </div>
            <div class="mt-3 sm:mt-0 sm:ml-3">
              <a href="https://s2.mgt.moe:7000/"
                class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10">
                在线使用
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="invisible basis-0 m-auto md:basis-3/12 md:visible">
        <img src="phone2.png" class="m-auto" />
      </div>
    </div>
  </div>
  <div class="container m-auto h-screen max-w-7xl">
    <div class="px-8 h-screen sm:px-6 lg:px-10 md:h-1/2">
      <div class="m-auto lg:text-center">
        <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Emojilizer</h2>
        <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
          轻量化趣味图片生成应用 </p>
        <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
          无需注册，即开即用，专注核心功能
        </p>
      </div>
      <dl class="m-auto space-y-10 my-4 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10 md:my-12">
        <div class="relative">
          <dt>
            <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
              <!-- Heroicon name: outline/annotation -->
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
              </svg>
            </div>
            <p class="ml-16 text-lg leading-6 font-medium text-gray-900">隐私保护</p>
          </dt>
          <dd class="mt-2 ml-16 text-base text-gray-500">
            只需一键，即可隐去图片中所有人脸信息，避免隐私信息泄漏。
          </dd>
        </div>
        <div class="relative">
          <dt>
            <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
              <!-- Heroicon name: outline/annotation -->
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
              </svg>
            </div>
            <p class="ml-16 text-lg leading-6 font-medium text-gray-900">趣味社交</p>
          </dt>
          <dd class="mt-2 ml-16 text-base text-gray-500">
            为您的社交媒体配图提供灵感。
          </dd>
        </div>
        <div class="relative">
          <dt>
            <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
              <!-- Heroicon name: outline/annotation -->
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
              </svg>
            </div>
            <p class="ml-16 text-lg leading-6 font-medium text-gray-900">无需注册</p>
          </dt>
          <dd class="mt-2 ml-16 text-base text-gray-500">
            无需注册，无需手机号，即开即用，专注核心功能。
          </dd>
        </div>
        <div class="relative">
          <dt>
            <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
              <!-- Heroicon name: outline/annotation -->
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
              </svg>
            </div>
            <p class="ml-16 text-lg leading-6 font-medium text-gray-900">跨平台客户端</p>
          </dt>
          <dd class="mt-2 ml-16 text-base text-gray-500">
            支持Web端和安卓端，随时随地使用。
          </dd>
        </div>
      </dl>
    </div>
    <div class="px-8 sm:px-6 lg:px-10">
      <h2
        class="font-extrabold block text-5xl my-16 md:text-6xl text-left text-transparent bg-clip-text bg-gradient-to-r from-violet-600 to-pink-600">
        根据表情替换
      </h2>
      <div class="gap-8 m-auto max-w-6xl flex flex-wrap">
        <img src="demo0.jpg" class=" m-auto rounded-lg shadow-lg aspect-auto" />
        <img src="demo1.jpg" class=" m-auto rounded-lg shadow-lg aspect-auto" />
      </div>
    </div>
    <div class="px-8 sm:px-6 lg:px-10">
      <h2
        class="font-extrabold block text-5xl my-16 md:text-6xl text-left text-transparent bg-clip-text bg-gradient-to-r from-violet-600 to-pink-600">
        超强人脸识别
      </h2>
      <div class="gap-8 m-auto max-w-6xl flex flex-wrap">
        <img src="demo3.jpg" class=" m-auto rounded-lg shadow-lg aspect-auto" />
        <img src="demo2.jpg" class=" m-auto rounded-lg shadow-lg aspect-auto" />
      </div>
    </div>
    <div class="px-8 sm:px-6 lg:px-10">
      <div class="h-32 content-center grid">
        <button onclick="topFunction()" class="m-auto" id="myBtn" title="Go to top">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</body>

</html>
<script>
  function topFunction() {
    window.scrollTo({ top: 0, behavior: 'smooth' });

  }
</script>
